<template>
  <div class="container">
    <img src="../../assets/404_images/404.png" alt="" />
    <div class="tips">
      <h2>哎呀，页面丢失了🎈</h2>
      <div class="msg">
        请检查您输入的URL是否正确，或单击下面的按钮返回主页。
      </div>
      <a-button type="primary" shape="round" @click="toHome">返回主页</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Page404",
  methods: {
    toHome() {
      this.$router.push(
        { path: "/" },
        onComplete => {},
        onAbort => {}
      );
    }
  }
};
</script>

<style>
.container {
  width: 900px;
  height: 329px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
img {
  float: left;
  width: 600px;
}
.tips {
  float: left;
  width: 300px;
}
h2 {
  font-weight: bold;
}
.msg {
  color: grey;
  font-size: 13px;
  margin-bottom: 15px;
}
</style>
